<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Component One CollectionView for Editing</title>
    <link href="../contents/bootstrap.min.css" rel="stylesheet"/>
    <link href="../contents/wijmo.min.2022.04.22.uat.css" rel="stylesheet"/>
    
    <script type="text/javascript" src="../Javascripts/wijmo.min.2022.04.22.uat.js"></script>
    

    <style type="text/css">
        .wj-flexgrid:not(.changed) {
            height: 300px;
        }

        .changed {
            font-size: 90%;
            background-color: #f0f0f0
        }

        .edited {
            color: orange
        }

        .added {
            color: green
        }

        .removed {
            color: red
        }

        .form-group {
            margin-right: 8px;
        }

        .form-group > label {
            margin-right: 3px;
        }

        .form-group input:invalid {
            border-color: red;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255,0,0,.6);
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6">
                <div id="grid"></div>
            </div>
            <div class="col-xs-6">
                <h4>Edited items:</h4>
                <div id="edited" class="changed edited"></div>

                <h4>Added items:</h4>
                <div id="added" class="changed added"></div>

                <h4>removed items:</h4>
                <div id="removed" class="changed removed"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece', 'Spain', 'Portugal', 'Australia'];
        function getData(){
            let data = [];
            //
            for (let i = 0; i < countries.length; i++) {
                data.push({
                    country: countries[i],
                    downloads: Math.round(Math.random() * 20000),
                    sales: Math.random() * 10000,
                    expenses: Math.random() * 5000
                });
            }
            //
            return data;
        }
        function getError(item, prop){
            switch (prop) {
                case "country":
                    return countries.indexOf(item.country) < 0 ? 'Invalid Country' : '';
                case "downloads":
                case "sales":
                case "expenses":
                    return item[prop] < 0 ? 'Negative values not allowed!' : '';
                case "active":
                    return item.active && item.country.match(/^(US|Germany)$/)
                        ? 'Active items not allowed in the US or Germany!'
                        : '';
                case null:
                    let errors = [];
                    for (let key in item) {
                        let err = getError(item, key);
                        if (err)
                            errors.push(err);
                    }
                    return errors.length > 1
                        ? 'this item has ' + errors.length + ' errors'
                        : (errors.length == 1 ? errors[0] : null);
            }
        }

        document.readyState === "complete"?init():window.onload = init;

        function init() {
            let cv = new wijmo.collections.CollectionView(getData(),{
                sortDescriptions: ["country"],
                getError,
				trackChanges:true
            });

            let grid = new wijmo.grid.FlexGrid("#grid", {
                itemsSource:cv,
                allowAddNew:true,
                allowDelete:true,
				columns:[
					{binding:'country', header:'Country', dataMap:countries},
					{binding:'downloads', header:'Downloads', format:'n2'},
					{binding:'sales', header:'Sales', format:'n2'},
					{binding:'expenses', header:'Expenses', format:'n2'},
				]
            });


            let edited = new wijmo.grid.FlexGrid('#edited',{
                itemsSource:cv.itemsEdited,
                isReadOnly:true
            });

            let added = new wijmo.grid.FlexGrid('#added',{
                itemsSource:cv.itemsAdded,
                isReadOnly:true
            });

            let removed = new wijmo.grid.FlexGrid('#removed',{
                itemsSource:cv.itemsRemoved,
                isReadOnly:true
            });
        }
    </script>
</body>
</html>